<style type="text/css">
	.border-container::after {
		content: "Item de catálogo";
	}
</style>
<div class="container">
	<div class="border-container">
		@if(Session::has('message'))
            <div class="alert alert-success">{{ Session::get('message') }}</div>
        @endif
	
		<table class="table table-striped table-hover table-condensed" id="productList"></table>
	</div>
	
	<div class="container-fluid">
		<div class="row">
			<div class="pull-left">{{ HTML::link('product/create', 'Novo Produto', array('class' => 'btn btn-primary')) }}</div>
			<div class="pull-right">
				<form id="frmFilter" role="form" class="form-inline">
					<div class="form-group">
		                <input type="text" name="name" class="form-control" placeholder="Nome do produto">
					</div>
					<a href="#" id="btnFilter" class="btn btn-default">Filtrar</a>
				</form>
			</div>
		</div>
	</div>
</div>
<script>
	$(document).ready(function() {
		$('#productList').report({
			source: $.rootUrl + 'product/list',
			maxRows: $.maxRows,
			columns: [
				{ 
					"sTitle": "Produto", 
					"mDataProp": "name", 
					"bSortable" : false,
					"fnRender": function(obj, value) {
						return $('<div/>').append(
							$('<a/>')
								.attr('href', $.rootUrl + 'product/' + obj.aData.id + '/edit')
								.text(value)
						).html();
					}
	            },
	            {
	            	"sTitle": "Componentes", 
					"mDataProp": 'components', 
					"bSortable" : false,
					"fnRender": function(obj, values) {
						var components = [];

						$.each(values, function(index, component) {
							components.push(component.name);
						});

						return components.join('; ');
	            	}
				}
			]
		});
	});
</script>